<template>
    <div class="statisticsBox">
        <h3>{{ title }}</h3>
        <div class="content">
            <span class="name" v-for="(item,index) in countArr" :key="index">
                {{ item.theName }}<span class="quantity">{{ item.theQuantity }}</span>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name:'statistics',
        data(){
            return {
            }
        },
        props:{
            title:{
                type:String,
                default:'消息统计'
            },
            countArr:{
                type:Array,
                default:()=>[]
            }
        }
    }
</script>

<style scoped>
     .statisticsBox{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-top: 20px;
        padding: 10px 30px;
     }
     h3{
        font-size: 20px;
     }
     .content{
        margin-top: 10px;
        padding: 10px 20px;
        background: white;
        font-size: 19px;
        display: flex;
        align-items: center;
     }
     .name{
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
     }
     .quantity{
        margin-top: 20px;
     }
</style>